<template>
  <div class="word-cloud">
    <div ref="cloud" class="cloud">
    </div>
    <input ref="input" v-model="input" />
  </div>
</template>

<script>
import echarts from 'echarts';
import 'echarts-wordcloud';

export default {
  name: "WordCloud",
  props: {
    data: Array
  },
  data() {
    return {
      input: ''
    };
  },
  methods: {
    drawCloud() {
      const myChart = echarts.init(this.$refs.cloud);
      
      const data = this.data.map((value, index) => ({
        name: value.name.length >= 30 ? value.name.substr(0, 27) + '...' : value.name,
        direction: value.name,
        value: (() => 510 + Math.round(Math.random() * 50))()
      }));


      let drawOutOfBound = false;
      let wordCloudMinFontSize = 14;
      let wordCloudMaxFontSize = 20;

      if (data.length >= 18) {
        wordCloudMinFontSize = 8;
        wordCloudMaxFontSize = 14;
      }
      else if (data.length >= 10) {
        wordCloudMaxFontSize = 18;
      } else {
        drawOutOfBound = true;
      }
      const option = {
        title: {
          text: 'Study Theme',
          left: 'center'
        },
        tooltip: {
          formatter: (params) => {
            return `Copy '${params.data.direction}'`;
          }
        },
        series: [{
        type: 'wordCloud',

        // The shape of the "cloud" to draw. Can be any polar equation represented as a
        // callback function, or a keyword present. Available presents are circle (default),
        // cardioid (apple or heart shape curve, the most known polar equation), diamond (
        // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.

        shape: 'circle',

        // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
        // Default to be put in the center and has 75% x 80% size.

        left: 'center',
        top: 'center',
        width: '70%',
        height: '80%',
        right: null,
        bottom: null,

        // Text size range which the value in data will be mapped to.
        // Default to have minimum 12px and maximum 60px size.

        sizeRange: [wordCloudMinFontSize, wordCloudMaxFontSize],

        // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45

        rotationRange: [-45, 45],
        rotationStep: 45,

        // size of the grid in pixels for marking the availability of the canvas
        // the larger the grid size, the bigger the gap between words.

        gridSize: 8,

        // set to true to allow word being draw partly outside of the canvas.
        // Allow word bigger than the size of the canvas to be drawn
        drawOutOfBound,

        // Global text style
        textStyle: {
          normal: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            // Color can be a callback function or a color string
            color: function () {
              // Random color
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')';
            }
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },

        // Data is an array. Each array item must have name and value property.
        data,
        }],
      };
      myChart.setOption(option);
      myChart.on('click', (params) => {
        this.input = params.data.direction;
        setTimeout(() => {
          let input = this.$refs.input;
          input.select(); // 选择对象
          document.execCommand('copy');
          console.log('复制成功');
        }, 10);
      });
    }
  },
  components: {

  },
};
</script>

<style scoped lang="scss">
.word-cloud {
  >.cloud {
    height: 450px;
  }
  >input {
    position: absolute;
    opacity: 0.1;
    // top: 0; 
    margin-top: -200px;
    margin-left: 100px;
    z-index: -1;
  }
}
</style>
